import React,{useState} from 'react';
import './index.less'

// 此功能类似于vue slot 插槽
function ChildrenProps(props) {
  const getPerStyle = (userInfo) => {
    let str =  userInfo.sex == 'man'?'green':'red'
    return {color:str}
  }
  const getPreClass = (userInfo) => {
    let str = 'personArea'
    str += " "
    if(userInfo.sex == 'man'){
      str += 'greenColor'
    }else{
      str += 'redColor'
    }
    return str
  }
  return (
    <div className="slotTest">
      <div className="slotli">
        <Child1 title='这里是默认插槽'>
          <div className="more">查看更多</div>
        </Child1>
      </div>
      <div className="slotli">
        <Child2
          title="这里是具名插槽"
          moreSolt={<div className="more">查看更多</div>}
          mainSlot={<div className="mainCon">这里是具名插槽的内容……</div>}
        >
        </Child2>
      </div>
      <div className="slotli">
        <Child3
          title="这里是作用域插槽"
          moreSolt={()=><div className="more">查看更多</div>}
          mainSlot={(userInfo)=>{
               return (
                 <div className="mainCon">
                   <div> 这里是作用域插槽的内容……</div>
                   <div>name:{userInfo.name},age:{userInfo.age},sex:{userInfo.sex}</div>
                 </div>
               )
          }}
          classSlot={(userInfo)=>{
            return (
              <div className="mainCon">
                <div> 这里是classSlot作用域插槽的内容……</div>
                <div className={userInfo.sex=='man'?'greenColor':'redColor'}>name:{userInfo.name},age:{userInfo.age},sex:{userInfo.sex}</div>
                <div className={['personArea',userInfo.sex=='man'?'greenColor':'redColor'].join(' ')}>name:{userInfo.name},age:{userInfo.age},sex:{userInfo.sex}</div>
                <div className={getPreClass(userInfo)}>name:{userInfo.name},age:{userInfo.age},sex:{userInfo.sex}</div>
              </div>
            )
          }}
          styleSlot={(userInfo)=>{
            return (
              <div className="mainCon">
                <div> 这里是styleSlot作用域插槽的内容……</div>
                <div style={{'color':userInfo.sex=='man'?'green':'red'}}>name:{userInfo.name},age:{userInfo.age},sex:{userInfo.sex}</div>
                <div className="personArea"
                     style={getPerStyle(userInfo)}
                >name:{userInfo.name},age:{userInfo.age},sex:{userInfo.sex}</div>
              </div>
            )
          }}
        >
        </Child3>
      </div>
    </div>
  );
}

export default ChildrenProps;

//默认插槽
function Child1(props) {
  const { children, title = '' } = props
  return (
    <div className="child1">
      <div className="headerArea">
        <div className="title">{title}</div>
        {children}
      </div>
      <div className="main">
        这里是内容……
      </div>

    </div>
  );
}

//具名插槽
function Child2(props) {
  const { children, title,moreSolt='',mainSlot = '' } = props
  return (
    <div className="slotTest">
      <div className="headerArea">
        <div className="title">{title}</div>
        {moreSolt}
      </div>
      <div className="main">
        {mainSlot}
      </div>

    </div>
  );
}

//作用域插槽
function Child3(props) {
  const [userInfo,setUserInfo] = useState({name:'tom',age:18, sex:'man'})
  const changePerson = () => {
    if(userInfo.name =='tom'){
      setUserInfo({name:'lili',age:17, sex:'woman'})
    }else{
      setUserInfo({name:'tom',age:18, sex:'man'})
    }
  }
  const { children, title,moreSolt='', mainSlot = '',classSlot= '',styleSlot= '' } = props
  return (
    <div className="slotTest">
      <div className="headerArea">
        <div className="title">{title}</div>
        {moreSolt(userInfo)}
      </div>
      <div className="main">
        {mainSlot(userInfo)}
      </div>
      <div className="slotli_li">
        {classSlot(userInfo)}
      </div>
      <div className="slotli_li">
        {styleSlot(userInfo)}
      </div>
      <button className="btn" onClick={changePerson}>换人</button>
    </div>
  );
}
